<template>
  <el-button @click="handle">点击报表预览</el-button>

  <div style="height: 100%" id="action_2_9_3_echo"></div>
</template>
<script setup>
import {$bus} from "@/bus/index.js";

const handle = () => {
  $bus.emit("preview", preview);
}

const reportDesignerId = "action_2_9_3_main"
import {usePreviewStore} from "@/stores/modules/xzPreviewStore";
import {onMounted, ref} from "vue";
import {queryonUpdateDataFrom, queryResponseDataOnDatasets} from "@/utils/onUpdateDataUtils.js"
import _onUpdateData from "./action_2_8.data.json"

const usePreStore = usePreviewStore();
const option = {
  mode: 'read',  //  报表模式  read | edit  只读模式|编辑模式
  view: {
    width: () => document.documentElement.clientWidth,
    height: () => document.documentElement.clientHeight
  },   // 设置报表的宽高
  renderArrow: true,  // 是否显式 扩展方向图标
  showFreeze: true,  // 是否显式冻结线
  showGrid: true,   // 是否显式网格线
  showPreviewToolbar: true,
  showBottombar: true,
  showSelect: true,
};

let spreadSheet;
let config;
let data = [];
onMounted(() => {
  spreadSheet = XZReport("#action_2_9_3_echo", option);

})
const preview = (_config, _data) => {
  config = _config;
  data = _data;
  spreadSheet.update(config, data);

}

const onUpdateData = (datasets, params) => {
  console.log("datasets:", datasets, "params:", params);
  return new Promise((resolve, reject) => {
    resolve(queryonUpdateDataFrom(datasets, params, _onUpdateData))
  })
}
option.onUpdateData = onUpdateData


function onUpdateDatasetList() {
  console.log("onUpdateDatasetList  is called")
  return new Promise((resolve, reject) => {
    resolve([]);

  })
}

option.onUpdateDatasetList = onUpdateDatasetList


</script>

